<template>
    <hr />
  <div class="content">
    <div class="warp">
      <el-form
    label-width="100px"
    style="max-width: 460px"
  >
    <el-form-item label="秒杀订单超过:">
      <el-input v-model="form.flashOrderOvertime">
      <template #append>分</template>
    </el-input>
    </el-form-item>
    <el-form-item label="正常订单超过:">
      <el-input v-model="form.normalOrderOvertime">
      <template #append>分</template>
    </el-input>
    </el-form-item>
    <el-form-item label="发货超过:">
      <el-input v-model="form.confirmOvertime">
      <template #append>天</template>
    </el-input>
    </el-form-item> 
    <el-form-item label="订单完成超过:">
      <el-input v-model="form.finishOvertime">
      <template #append>天</template>
    </el-input>
    </el-form-item>
     <el-form-item label="订单完成超过:">
      <el-input v-model="form.commentOvertime">
      <template #append>天</template>
    </el-input>
    </el-form-item>
  </el-form>
  <div>
    <p>未付款，订单自动关闭</p>
    <p>未付款，订单自动关闭</p>
    <p>未付款，订单自动完成</p>
    <p>自动结束交易，不能申请售后</p>
    <p>自动五星好评</p>
  </div>
    </div>

    <!-- <div class="item">秒杀订单超过:<el-input v-model="form.flashOrderOvertime">
      <template #append>分</template>
    </el-input>未付款，订单自动关闭</div>
     <div class="item">正常订单超过:<el-input v-model="form.normalOrderOvertime">
      <template #append>分</template>
    </el-input>未付款，订单自动关闭</div> 
     <div class="item">发货超过:<el-input v-model="form.confirmOvertime">
      <template #append>天</template>
    </el-input>未收货，订单自动完成</div>
      <div class="item">订单完成超过:<p>自动结束交易，不能申请售后</p></div>
      <div class="item">订单完成超过:自动五星好评</div> -->
    <el-button type="primary" @click="updateOrderSetting">提交</el-button>
  </div>
</template>
<script setup lang='ts'>
import { getOrderSettingApi ,updateOrderSettingApi} from './api'
import { ElMessageBox ,ElMessage} from "element-plus";
import { ref ,reactive} from "vue"
  const form = reactive<OrderSettingModel>({
    id:1,
    flashOrderOvertime: 0,
  normalOrderOvertime:0,
  confirmOvertime: 0,
  finishOvertime: 0,
  commentOvertime: 0,
 
});
const queryOrderSetting = ()=>{
  getOrderSettingApi(1).then((res)=>{
if(res.code===200){
  form.flashOrderOvertime=res.data.flashOrderOvertime
  form.normalOrderOvertime=res.data.normalOrderOvertime
  form.confirmOvertime=res.data.confirmOvertime
  form.finishOvertime=res.data.finishOvertime
  form.commentOvertime=res.data.commentOvertime
  form.id=res.data.id
}
})
}
queryOrderSetting();
const updateOrderSetting = () => {
  ElMessageBox.confirm("是否要提交修改?", "修改用户信息", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      updateOrderSettingApi(form).then((res) => {
        if (res.code === 200) {
          ElMessage.success("修改成功");
        }
      });
    })
    .catch(() => {});
};
</script>
<style lang="less" scoped>
.content{
    width: 720px;
    border: 1px solid #ebeef5;
    padding: 35px 35px 15px 35px;
    margin: 20px auto;
  .warp{
    display: flex;
    justify-content: center;
    p{
      height: 32px;
      line-height: 32px;
      margin-bottom: 18px;
      margin-left: 10px;
      font-size: 14px;
      color: #303133;
    }
  }
    :deep(.el-button){
           margin-left: 190px;
        }
}
</style>